<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题咨询</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <style>
        /* 基础样式保护 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.5;
            color: #333333;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        
        .consultation-container {
            padding: 16px;
            min-height: 100vh;
            max-width: 600px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        
        .consultation-form {
            background: #fff;
            border-radius: 12px;
            padding: 24px 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }
        
        .form-group {
            margin-bottom: 20px;
            width: 100%;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-size: 14px;
            font-weight: 500;
        }
        
        .form-label.required::after {
            content: "*";
            color: #ff4d4f;
            margin-left: 4px;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fff;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
            outline: none;
        }
        
        .btn-submit {
            width: 100%;
            padding: 12px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 24px;
            max-width: 400px;
            margin: 24px auto 0;
            display: block;
        }
        
        .btn-submit:hover {
            background: #096dd9;
        }
        
        .btn-submit:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
    </style>
    <style>
        body {
            background: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        .consultation-container {
            padding: 16px;
            min-height: 100vh;
            max-width: 600px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        @media screen and (max-width: 600px) {
            .consultation-container {
                padding: 12px;
            }
        }

        .consultation-form {
            background: #fff;
            border-radius: 12px;
            padding: 24px 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .form-inner {
            max-width: 340px;
            margin: 0 auto;
            width: 100%;
        }

        .form-title {
            font-size: 18px;
            color: #333;
            font-weight: 500;
            margin-bottom: 24px;
            padding-bottom: 12px;
            border-bottom: 1px solid #eee;
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
            width: 100%;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-size: 14px;
            font-weight: 500;
        }

        .form-label.required::after {
            content: "*";
            color: #ff4d4f;
            margin-left: 4px;
        }

        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fff;
            box-sizing: border-box;
        }

        .form-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
            outline: none;
        }

        .form-input::placeholder {
            color: #999;
        }

        .input-group {
            display: flex;
            gap: 8px;
            align-items: center;
            width: 100%;
        }

        .input-group .form-input {
            flex: 1;
            min-width: 0; /* 防止flex子元素溢出 */
        }

        .verify-code-btn {
            width: 112px;
            white-space: nowrap;
            background: #fff;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            padding: 0 16px;
            height: 42px;
            line-height: 40px;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
            flex-shrink: 0;
        }

        .verify-code-btn:hover {
            background: rgba(24, 144, 255, 0.05);
        }

        .verify-code-btn:disabled {
            border-color: #e4e7ed;
            color: #999;
            background: #f5f7fa;
            cursor: not-allowed;
        }

        .custom-select {
            width: 100%;
            position: relative;
        }

        .select-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            font-size: 14px;
            background: #fff;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
            box-sizing: border-box;
            height: 42px; /* 与其他输入框保持一致的高度 */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .select-input:hover {
            border-color: var(--primary-color);
        }

        .select-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            width: 100%;
            background: #fff;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            display: none;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
        }

        .select-search {
            padding: 8px;
            border-bottom: 1px solid #f0f0f0;
            box-sizing: border-box;
        }

        .select-search input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .select-search input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }

        .select-options {
            max-height: 240px;
            overflow-y: auto;
            padding: 4px 0;
        }

        .select-options::-webkit-scrollbar {
            width: 6px;
        }

        .select-options::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .select-option {
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            color: #333;
        }

        .select-option:hover {
            background-color: #f5f7fa;
            color: var(--primary-color);
        }

        .select-arrow {
            color: #999;
            font-size: 12px;
            transition: transform 0.3s;
            margin-left: 8px;
            flex-shrink: 0;
        }

        .custom-select.active .select-arrow {
            transform: rotate(180deg);
        }

        /* 确保下拉框内容不会超出容器 */
        .select-input-text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 8px;
        }

        textarea.form-input {
            min-height: 100px;
            max-height: 200px;
            resize: vertical;
            line-height: 1.6;
            width: 100%;
            box-sizing: border-box;
        }

        .btn-submit {
            width: 100%;
            padding: 12px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 24px;
            max-width: 400px;
            margin: 24px auto 0;
            display: block;
        }

        .btn-submit:hover {
            background: #096dd9;
        }

        .btn-submit:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        select.form-input {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
        }

        /* 调整验证码按钮组的布局 */
        .input-group {
            display: flex;
            gap: 8px;
            align-items: center;
            max-width: 400px;
            margin: 0 auto;
        }

        .verify-code-btn {
            min-width: 112px;
            flex-shrink: 0;
        }

        /* 调整文本域的大小 */
        textarea.form-input {
            min-height: 100px;
            max-height: 200px;
        }

        /* 调整下拉框的宽度和位置 */
        .custom-select {
            max-width: 400px;
            margin: 0 auto;
        }

        .select-dropdown {
            max-width: 400px;
            width: 100%;
        }

        .custom-select.active .select-dropdown {
            display: block;
        }

        /* 优化移动端布局 */
        @media screen and (max-width: 480px) {
            .consultation-form {
                padding: 16px;
            }

            .form-group {
                margin-bottom: 16px;
            }

            .form-input {
                padding: 8px 12px;
            }

            .verify-code-btn {
                min-width: 100px;
                padding: 0 12px;
            }
            .select-input {
                height: 38px; /* 移动端稍微调小高度 */
            }
        }

        /* 弹窗样式 */
        .toast-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            display: none;
        }

        .toast {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 16px 24px;
            border-radius: 8px;
            font-size: 14px;
            text-align: center;
            min-width: 200px;
            max-width: 80%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: fadeInOut 0.3s ease;
        }

        .toast.success {
            background: rgba(82, 196, 26, 0.9);
        }

        .toast.error {
            background: rgba(255, 77, 79, 0.9);
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 遮罩层样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 9998;
            backdrop-filter: blur(2px);
        }
    </style>
</head>
<body>
    <div class="consultation-container">
        <div class="consultation-form">
            <h2 class="form-title">问题咨询</h2>
            <div class="form-inner">
                <form id="consultationForm" onsubmit="return submitForm(event)">
                    <div class="form-group">
                        <label class="form-label required">所在地</label>
                        <div class="custom-select" id="citySelect">
                            <div class="select-input" onclick="toggleDropdown('citySelect')">
                                <span class="select-input-text">请选择所在地区</span>
                                <span class="select-arrow">▼</span>
                            </div>
                            <div class="select-dropdown">
                                <div class="select-search">
                                    <input type="text" 
                                           placeholder="搜索地区..." 
                                           oninput="searchOptions(this, 'citySelect')"
                                           onclick="event.stopPropagation()">
                                </div>
                                <div class="select-options"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">学校</label>
                        <input type="text" class="form-input" placeholder="请输入学校名称" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">学生/家长姓名</label>
                        <input type="text" class="form-input" placeholder="请输入姓名" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">联系电话</label>
                        <div class="input-group">
                            <input type="tel" 
                                   class="form-input" 
                                   name="phone" 
                                   placeholder="请输入手机号码" 
                                   pattern="\d{11}" 
                                   required>
                            <button type="button" class="verify-code-btn" onclick="sendVerifyCode(this)">获取验证码</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">验证码</label>
                        <input type="text" 
                               class="form-input" 
                               name="verifyCode" 
                               placeholder="请输入验证码" 
                               maxlength="6" 
                               required>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">问题类型</label>
                        <select class="form-input" required>
                            <option value="">请选择问题类型</option>
                            <option value="1">投保咨询</option>
                            <option value="2">理赔咨询</option>
                            <option value="3">保单查询</option>
                            <option value="4">其他问题</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">问题描述</label>
                        <textarea class="form-input" placeholder="请详细描述您的问题，以便我们更好地为您服务" required></textarea>
                    </div>

                    <button type="submit" class="btn-submit">提交</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 弹窗组件 -->
    <div class="modal-overlay"></div>
    <div class="toast-container">
        <div class="toast"></div>
    </div>

    <script>
        // 地区数据
        const areaData = {
            "长春市": ["南关区", "宽城区", "朝阳区", "二道区", "绿园区", "双阳区", "九台区", "农安县", "榆树市", "德惠市"],
            "吉林市": ["昌邑区", "龙潭区", "船营区", "丰满区", "永吉县", "蛟河市", "桦甸市", "舒兰市", "磐石市"],
            "四平市": ["铁西区", "铁东区", "梨树县", "伊通满族自治县", "公主岭市", "双辽市"],
            "辽源市": ["龙山区", "西安区", "东丰县", "东辽县"],
            "通化市": ["东昌区", "二道江区", "通化县", "辉南县", "柳河县", "梅河口市", "集安市"],
            "白山市": ["浑江区", "江源区", "抚松县", "靖宇县", "长白朝鲜族自治县", "临江市"],
            "松原市": ["宁江区", "前郭尔罗斯蒙古族自治县", "长岭县", "乾安县", "扶余市"],
            "白城市": ["洮北区", "镇赉县", "通榆县", "洮南市", "大安市"],
            "延边朝鲜族自治州": ["延吉市", "图们市", "敦化市", "珲春市", "龙井市", "和龙市", "汪清县", "安图县"]
        };

        // 初始化地区选择器
        function initializeAreaSelect() {
            const citySelect = document.getElementById('citySelect');
            const optionsContainer = citySelect.querySelector('.select-options');
            
            // 清空现有选项
            optionsContainer.innerHTML = '';
            
            // 添加城市选项
            Object.keys(areaData).forEach(city => {
                const option = document.createElement('div');
                option.className = 'select-option';
                option.textContent = city;
                option.onclick = (e) => {
                    e.stopPropagation();
                    selectCity(city);
                };
                optionsContainer.appendChild(option);
            });
        }

        // 选择城市
        function selectCity(city) {
            const citySelect = document.getElementById('citySelect');
            const inputText = citySelect.querySelector('.select-input-text');
            inputText.textContent = city;
            toggleDropdown('citySelect');
        }

        // 切换下拉框显示状态
        function toggleDropdown(selectId) {
            const select = document.getElementById(selectId);
            const allSelects = document.querySelectorAll('.custom-select');
            
            // 关闭其他所有下拉框
            allSelects.forEach(s => {
                if (s.id !== selectId) {
                    s.classList.remove('active');
                }
            });
            
            // 切换当前下拉框的状态
            select.classList.toggle('active');
        }

        // 搜索选项
        function searchOptions(input, selectId) {
            const select = document.getElementById(selectId);
            const options = select.querySelectorAll('.select-option');
            const searchText = input.value.toLowerCase();
            
            options.forEach(option => {
                const text = option.textContent.toLowerCase();
                option.style.display = text.includes(searchText) ? 'block' : 'none';
            });
        }

        // 显示提示信息
        function showToast(message, type = 'normal', duration = 2000) {
            const overlay = document.querySelector('.modal-overlay');
            const toastContainer = document.querySelector('.toast-container');
            const toast = toastContainer.querySelector('.toast');
            
            // 设置消息内容和样式
            toast.textContent = message;
            toast.className = 'toast';
            if (type === 'success') {
                toast.classList.add('success');
            } else if (type === 'error') {
                toast.classList.add('error');
            }
            
            // 显示遮罩和提示
            overlay.style.display = 'block';
            toastContainer.style.display = 'block';
            
            // 定时关闭
            setTimeout(() => {
                overlay.style.display = 'none';
                toastContainer.style.display = 'none';
            }, duration);
        }

        // 验证手机号格式
        function validatePhone(phone) {
            return /^1[3-9]\d{9}$/.test(phone);
        }

        // 发送验证码
        function sendVerifyCode(btn) {
            const phone = btn.parentElement.querySelector('input[type="tel"]').value;
            if (!phone) {
                showToast('请输入手机号码', 'error');
                return;
            }
            if (!validatePhone(phone)) {
                showToast('请输入正确的手机号码', 'error');
                return;
            }

            // 禁用按钮并开始倒计时
            let countdown = 60;
            btn.disabled = true;
            const originalText = btn.textContent;
            
            showToast('验证码发送成功', 'success');
            
            const timer = setInterval(() => {
                countdown--;
                btn.textContent = `${countdown}秒后重试`;
                if (countdown <= 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.textContent = originalText;
                }
            }, 1000);
        }

        // 表单提交
        function submitForm(event) {
            event.preventDefault();
            
            // 获取表单元素
            const form = event.target;
            
            // 验证所在地
            const citySelect = document.querySelector('.select-input-text');
            if (citySelect.textContent === '请选择所在地区') {
                showToast('请选择所在地区', 'error');
                return false;
            }

            // 验证学校
            const school = form.querySelector('input[placeholder="请输入学校名称"]').value.trim();
            if (!school) {
                showToast('请输入学校名称', 'error');
                return false;
            }

            // 验证姓名
            const name = form.querySelector('input[placeholder="请输入姓名"]').value.trim();
            if (!name) {
                showToast('请输入姓名', 'error');
                return false;
            }

            // 验证手机号
            const phone = form.querySelector('input[name="phone"]').value.trim();
            if (!phone) {
                showToast('请输入手机号码', 'error');
                return false;
            }
            if (!validatePhone(phone)) {
                showToast('请输入正确的手机号码', 'error');
                return false;
            }

            // 验证验证码
            const verifyCode = form.querySelector('input[name="verifyCode"]').value.trim();
            if (!verifyCode) {
                showToast('请输入验证码', 'error');
                return false;
            }
            if (verifyCode.length !== 6) {
                showToast('请输入6位验证码', 'error');
                return false;
            }

            // 验证问题类型
            const problemType = form.querySelector('select').value;
            if (!problemType) {
                showToast('请选择问题类型', 'error');
                return false;
            }

            // 验证问题描述
            const description = form.querySelector('textarea').value.trim();
            if (!description) {
                showToast('请输入问题描述', 'error');
                return false;
            }

            // 模拟提交成功
            showToast('提交成功！', 'success');
            setTimeout(() => {
                form.reset();
                // 重置所在地选择
                citySelect.textContent = '请选择所在地区';
            }, 2000);
            
            return false;
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            initializeAreaSelect();
            
            // 点击页面其他地方关闭下拉框
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.custom-select')) {
                    document.querySelectorAll('.custom-select').forEach(select => {
                        select.classList.remove('active');
                    });
                }
            });
        });
    </script>
</body>
</html> 